본문으로 건너뛰기

useEffect로 한 가지 역할만 수행해야 하는 이유

React를 사용하는 개발자라면 컴포넌트의 라이프사이클을 관리하는 데 필수적인 훅(Hook), useEffect를 사용해본 경험이 있을 것입니다. 하지만, 이 훅을 올바르게 사용하기 위해서는 몇 가지 중요한 원칙을 이해하고 따라야 합니다. 그 중 하나가 바로 useEffect로 한 가지 역할만 수행해야 하는 이유입니다. 이 원칙을 지키면 코드의 가독성과 유지보수성이 크게 향상됩니다.

useEffect의 기본 개념​

useEffect는 컴포넌트가 렌더링될 때와 의존성 배열에 있는 값이 변경될 때 실행되는 함수를 설정하는 Hook입니다. 아래는 기본적인 사용 예시입니다:

import React, { useEffect, useState } from 'react';

function MyComponent() {
  const [count, setCount] = useState(0);

  useEffect(() => {
    document.title = `You clicked ${count} times`;

    return () => {
      // cleanup code if needed
    };
  }, [count]); // count가 변경될 때마다 useEffect가 실행됩니다.

  return (
    <div>
      <p>You clicked {count} times</p>
      <button onClick={() => setCount(count + 1)}>
        Click me
      </button>
    </div>
  );
}

위 예시에서 useEffect는 count가 변경될 때마다 실행되며, 그에 따라 document.title이 업데이트됩니다.

한 가지 역할만 수행해야 하는 이유​

1. 가독성 증가​

여러 개의 기능을 하나의 useEffect에서 처리하면 코드가 복잡해져서 읽기 어려워집니다. 예를 들어, 다음 코드를 보겠습니다:

useEffect(() => {
  fetchData();
  subscribeToEvent();
  cleanUpResources();
}, []);

위 코드는 한 번에 너무 많은 일을 하려고 합니다. 이로 인해 각 기능이 제대로 작동하는지 확인하기 어려워집니다.

2. 유지보수 용이​

한 가지 역할만 수행하는 useEffect는 디버깅과 유지보수를 쉽게 만들어줍니다. 예를 들어, 다음과 같이 각 역할을 분리할 수 있습니다:

useEffect(() => {
  fetchData();
}, []);

useEffect(() => {
  subscribeToEvent();
  return () => {
    unsubscribeFromEvent();
  };
}, []);

useEffect(() => {
  cleanUpResources();
  return () => {
    releaseResources();
  };
}, []);

이렇게 분리하면 특정 기능에 문제가 발생했을 때, 문제를 추적하고 수정하는 것이 훨씬 쉬워집니다.

3. 의존성 관리가 쉬워짐​

각 useEffect가 한 가지 역할만 수행하면, 필요한 의존성을 명확히 관리할 수 있습니다. 예를 들어, 다음 코드를 보겠습니다:

useEffect(() => {
  functionA();
  functionB();
}, [dependencyA, dependencyB]);

이 경우 functionA가 dependencyA에만 의존하고, functionB가 dependencyB에만 의존한다면, 불필요하게 functionA가 dependencyB 때문에 실행되는 것을 피할 수 있습니다.

useEffect(() => {
  functionA();
}, [dependencyA]);

useEffect(() => {
  functionB();
}, [dependencyB]);

주의할 점​

  • 중복 실행 방지: 여러 useEffect가 동일한 의존성을 가질 경우, 중복 실행을 피하기 위해 각각의 역할을 명확히 구분해야 합니다.
  • 의존성 배열 관리: 의존성 배열을 정확히 관리하여 불필요한 재실행을 피하고 성능을 최적화해야 합니다.

더 알아보기​

  • 의존성 배열(dependency array): useEffect의 두 번째 인자로, 이 배열에 포함된 값이 변경될 때마다 useEffect가 재실행됩니다.
  • 클린업 함수(cleanup function): useEffect에서 반환하는 함수로, 컴포넌트가 언마운트될 때 또는 다음 이펙트가 실행되기 전에 호출됩니다.
  • 비동기 작업 관리: useEffect 내에서 비동기 작업을 처리하는 방법과 주의사항에 대해 알아보세요.

내용 요약과 다음 주제​

useEffect는 컴포넌트의 라이프사이클을 관리하는 중요한 Hook입니다. 여러 기능을 한 번에 처리하기보다는 각 기능을 분리하여 한 가지 역할만 수행하도록 작성하면 코드의 가독성과 유지보수성이 향상됩니다. 다음 주제인 useEffect 내부의 비동기 동작 관리에서는 useEffect 안에서 비동기 작업을 안전하고 효율적으로 처리하는 방법에 대해 알아보겠습니다.